[제이쿼리] 자식요소를 가진 요소 선택자, has()

제이쿼리(jQuery)의 선택자 중에서 특정 자식 요소를 가진 선택자만 알 수 있는 방법이 있을까요? 아래에서 확인해봅니다.

# 제이쿼리의 has() 선택자

제이쿼리에서 어떤 자식 요소를 가진 엘리먼트만 선택하고 싶을 때 사용할 수 있는 선택자 메소드가 존재합니다. 바로 has()입니다.

$('선택요소').has('자식 선택자')


has()를 사용하면 특정 자식 요소를 가졌을 경우에만 선택된 요소를 반환하게 해줍니다. 이런 이유로 찾고자 하는 범위를 줄이는 필터링 기능으로 활용할 수도 있죠.

그럼 어떻게 사용하는지 아래에서 간단한 예제를 만들어 보겠습니다.

! has() 메소드 예제소스 코드 보기

아래 코드를 봐주세요. 만약 아래와 같이 쇼핑몰 리스트를 보여주는 경우 각 리스트에서 strong 태그를 가지고 있는 태그만 선택하기 원할 수 있겠죠.

이런 경우에 has()를 사용하면 매우 편리합니다. 아래와 같이 스크립트를 작성합니다. 그리고 제목인 strong 태그를 가진 태그만 파랑색으로 표시해보도록 하겠습니다.

이제 자식 요소들 중 제목 태그인 strong을 가진 요소만 파랑색 스타일이 적용될 것입니다. 실제로 동작하는지 아래에서 구현해보았습니다.


적용된 코드를 살펴보면 웹이즈프리 쇼핑몰이 파랑색으로 나타나게 됩니다. 물론 다른 태그들은 css가 적용되지 않겠죠.

여기까지 jQuery의 선택자 메소드 has()에 대하여 간략하게 알아봤습니다.